/* ----

# Pio Plugin
# By: Dreamer-Paul
# Last Update: 2021.5.6

一个支持更换 Live2D 模型的 Typecho 插件。

本代码为奇趣保罗原创，并遵守 GPL 2.0 开源协议。欢迎访问我的博客：https://paugram.com

---- */

.pio-container{
    bottom: 0;
    z-index: 52;
    color: #666;
    position: fixed;
    user-select: none;
}

.pio-container .pio-show{
    left: -1em;
    bottom: 1em;
    width: 3em;
    height: 3em;
    display: none;
    cursor: pointer;
    position: absolute;
    border-radius: 3em;
    border: 3px solid #fff;
    transition: transform .3s;
    background: url(avatar.jpg) center/contain;
}

.pio-container.hidden .pio-show{
    display: block;
}
.pio-container.hidden .pio-show:hover{
    transform: translateX(.5em);
}

.pio-container.hidden #pio,
.pio-container.hidden .pio-action,
.pio-container.hidden .pio-dialog{
    display: none;
}

.pio-container.left{ left: 0 }
.pio-container.right{ right: 0 }
.pio-container.active{ cursor: move }
.pio-container.static{ pointer-events: none }

.pio-container .pio-action{
    top: 3em;
    opacity: 0;
    position: absolute;
    transition: opacity .3s;
}
.pio-container.left .pio-action{ right: 0 }
.pio-container.right .pio-action{ left: 0 }
.pio-container:hover .pio-action{ opacity: 1 }

.pio-action span{
    color: #fff;
    width: 1.5em;
    height: 1.5em;
    display: block;
    cursor: pointer;
    text-align: center;
    border-radius: 66%;
    margin-bottom: .5em;
    border: 1px solid #666;
    background: #fff center/70% no-repeat;
}
.pio-action .pio-home{
    background-image: url();
}
.pio-action .pio-close{
    background-image: url();
}
.pio-action .pio-skin{
    background-image: url();
}
.pio-action .pio-info{
    background-image: url();
}
.pio-action .pio-night{
    background-image: url();
}

.pio-container .pio-dialog{
    top: -2em;
    opacity: 0;
    z-index: -1;
    font-size: .8em;
    min-width: 12em;
    background: #fff;
    padding: .75em 1em;
    border-radius: 1em;
    visibility: hidden;
    position: absolute;
    word-break: break-all;
    border: 1px solid #eee;
    transition: opacity .3s, visibility .3s;
}
.pio-container .pio-dialog.active{
    opacity: 1;
    visibility: visible;
}

.pio-container.left .pio-dialog{ left: 1em }
.pio-container.right .pio-dialog{ right: 1em }

#pio{ vertical-align: middle }

@media screen and (max-width: 768px){
    #pio{ width: 8em }
    .pio-container{ pointer-events: none }
}